<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <!-- Bootstrap -->
    <link href="<?=base_url();?>/public/resource/default/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="<?=base_url();?>/public/resource/default/css/main.css" rel="stylesheet" />
    
</head>
<body>

    <nav class="navbar navbar-blue navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">CMS BY CI Framework</a>
                <a class="navbar-menu-btn" data-toggle="tooltip" data-placement="bottom" title="编辑菜单" target="workspace" href="<?=site_url('menu');?>">
                    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                </a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav top-menu">

                    <?php foreach ($top_menu as $key => $menu) : ?>
                        <li class="<?php if ($key === 0): echo 'active'; endif; ?>" onclick="fun_refresh_middle_menu(this,'<?=$menu['id']?>');" >
                            <a href="javascript:void(0);"><?=$menu['name']?></a>
                        </li>
                    <?php endforeach;?>
                </ul>
            </div>
        </div>

        <!-- 工具部分 -->
        <div class="toolbox">
            <ul class="nav navbar-nav">
                <li class="dropdown userbox">
                    <a class="dropdown-toggle" id="user-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <div class="profile-info">
                            <span class="name">John Smith Doe</span>
                            <span class="role"><i class=""></i> 超级管理员</span>
                        </div>
                        <figure class="profile-picture hidden-xs">
                            <img src="http://7xki1r.com1.z0.glb.clouddn.com/beauty-002.png" class="img-circle" alt="" />
                        </figure>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="user-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>

                </li>
                <li class="dropdown tool">
                    <a class="dropdown-toggle" id="new-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="new-menu">
                        <li><a href="#">文章</a></li>
                        <li><a href="#">媒体</a></li>
                        <li><a href="#">页面</a></li>
                        <li><a href="#">用户</a></li>
                    </ul>
                </li>
                <li class="tool"><a href="#">
                    <span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
                </a></li>
                <li class="tool"><a href="#">
                    <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
                </a></li>
            </ul>
        </div>
    </nav>

    <div class="">
        <div class="sidebar fmenu">
            <ul class="nav nav-sidebar middle-menu">

                <?php foreach ($middle_menu as $key => $menu) :  ?>
                    <li class="<?php if ($key === 0) : echo 'active'; endif; ?>" onclick="fun_refresh_end_menu(this,'<?=$menu['id']?>')">
                        <a href="javascript:void(0);">
                            <span class="<?=$menu['icon']?>" aria-hidden="true"></span>
                            <span class="sr-only">Error:</span><?=$menu['name']?>
                        </a>
                    </li>
                <?php endforeach;?>

            </ul>
        </div>

        <div class="sidebar cmenu">
            <ul class="nav nav-sidebar end-menu">

                <?php foreach ($end_menu as $key => $menu) : ?>
                    <li class="<?php if ($key === 0): echo 'active'; endif;?>" onclick="fun_click_end_menu(this);">
                        <a href="<?=$menu['url']?>" target="<?=$menu['target']?>">&bull; <?=$menu['name']?><span class="sr-only">(current)</span></a>
                    </li>
                <?php endforeach; ?>

            </ul>
        </div>
    </div>


    <div class="container-fluid main">
        <div class="row">
            <div class="col-sm-12 col-md-12 workspace">
                <iframe width="100%" id="workspace" name="workspace" frameborder="0" scrolling="no" onLoad="fun_set_workspace_height('#workspace')" src="<?=site_url('main/test');?>"></iframe>
            </div>
        </div>
    </div>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?=base_url();?>/public/resource/default/vendor/bootstrap/js/bootstrap.min.js"></script>

    <script src="<?=base_url();?>/public/resource/default/js/init.js"></script>

    <script type="text/javascript" language="javascript">

        /**
         * 初始化Iframe的高度
         *
         * @param id
         */
        function fun_set_workspace_height(id) {
            var workspace = $(id);
            var wpHeight = workspace.contents().find("body").height();
            workspace.height(wpHeight < 500 ? 500 : wpHeight);
        }

        /**
         * 刷新第二级别菜单选项
         */
        function fun_refresh_middle_menu(obj,id) {

            if (fun_empty(id))
            {
                alert('ID不能为空');
                return;
            }

            $(".top-menu > li").prop('class','');
            obj.className = 'active';

            var url    = '<?=site_url("main/get_menu")?>';
            var params = {id:id};
            var resp   = fun_ajax(url,params);

            if (resp.resultCode === CHttp.getConstant('HTTP_STATUS_SUCCESS'))
            {

                $('.middle-menu').html('');

                // 遍历更新菜单
                $(resp.resultData).each(function(index,item){
                    console.log(index);

                    if (index == 0)
                    {
                        fun_refresh_end_menu(null,item.id);
                    }

                    $('.middle-menu').append(
                        "<li onclick='fun_refresh_end_menu(this,\"" + item.id + "\");'>" +
                            "<a href='javascript:void(0);'>" +
                                "<span class='" + item.icon + "' aria-hidden='true'></span>" +
                                "<span class='sr-only'>Error:</span>" + item.name +
                            "</a>" +
                        "</li>"
                    );
                })
            }
            else
            {
                alert(resp.resultMsg);
            }

        }

        function fun_refresh_end_menu(obj,id) {

            if (fun_empty(id))
            {
                alert('ID不能为空');
                return;
            }

            $(".middle-menu > li").prop('class','');
            if (obj !== null)
            {
                obj.className = 'active';
            }

            var url    = '<?=site_url("main/get_menu")?>';
            var params = {id:id};
            var resp   = fun_ajax(url,params);

            if (resp.resultCode === CHttp.getConstant('HTTP_STATUS_SUCCESS'))
            {

                $('.end-menu').html('');

                // 遍历更新菜单
                $(resp.resultData).each(function(index,item){
                    console.log(index);
                    $('.end-menu').append(
                        "<li onclick='fun_click_end_menu(this);'>" +
                            "<a href='" + item.url + "' target='" + item.target + "'>&bull; " + item.name +
                                "<span class='sr-only'>(current)</span>" +
                            "</a>" +
                        "</li>"
                    );
                })
            }
            else
            {
                alert(resp.resultMsg);
            }
        }

        function fun_click_end_menu(obj) {
            $(".end-menu > li").prop('class','');
            obj.className = 'active';
        }

        /**
         * 激活所有应用了Tooltip的元素
         */
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })

    </script>

</body>
</html>